import React, { useState, useEffect } from 'react'
import Container from 'components/Container'
import Login1 from './style/login1'
import { setLoginStyle } from 'common/state'
import './index.scss'

function readerList(list) {
    // 生成组件缩略图
    const cards = list.map(({ Comp, size={}, name}, i) => {
        return <div className="card-li" key={i} >
            <div className="card-thumbnail" style={{...size}}><Comp /></div>
            <div className="card-name">{name || Comp.name}</div>
        </div>
    })
    return <div className="card-ul">{cards}</div>
}

export default function LgoinStyle() {
    const loginComps = require.context('./style', true, /\.(js|tsx|jsx)$/)
    const list = loginComps.keys().map(key => {
        const { default: Comp, ...args } = loginComps(key)
        return { Comp, ...args }
    })

    return (
        <Container title="登录风格">
            <div className="LgoinStyle">
                {readerList(list)}

                {/* <Login1 /> */}
            </div>

        </Container>
    )
}


